<template>
  <!-- 任务动态 -->
  <div class="div-background-Taskdynamic">
    <div>
      <img src="@/assets/img/other/icon-任务动态.png" class="img-Taskdynamic" /><span
        class="user-Taskdynamic-span"
        >任务动态</span
      >
    </div>
    <div class="Taskdynamic-moder" v-if="State.StateModelBoolean">
      <el-scrollbar class="infinite-list">
        <div
          class="Taskdynamic-span-moder"
          v-for="(its, numberindex) in State.stateModel"
          :key="numberindex"
        >
          <span class="Taskdynamic-span-name">{{ its.name }}</span>
          <span class="Taskdynamic-span-number" v-if="its.state==='已完成'">{{ its.score }}分</span>
          <span class="Taskdynamic-span-number" v-if="its.state==='未开始'" :class="its.state==='未开始' ? 'changefontNo':''">{{ its.state }}</span>
          <span class="Taskdynamic-span-number" v-if="its.state==='进行中'" :class="its.state==='进行中' ? 'changefont':''">{{ its.state }}</span>
          <span class="Taskdynamic-span-number" v-if="its.state==='未参与'" :class="its.state==='未参与' ? 'changefontNo':''">{{ its.state }}</span>
          <span else class="Taskdynamic-span-number" v-if="its.state==='已完成'" :class="its.state==='已完成' ? 'changefontNo':''">{{ TimeChange(its.useTime) }}</span>
          <span else class="Taskdynamic-span-number" v-if="its.state==='进行中'" :class="its.state==='进行中' ? 'changefontNo':''">{{ TimeChange(its.useTime) }}</span>
          <span else class="Taskdynamic-span-number" v-if="its.state==='未开始'"></span>
        </div>
      </el-scrollbar>
    </div>
    <div v-else class="Taskdynamic-moder-No">
      <span>暂无数据</span>
    </div>
  </div>
</template>

<script>
import bus from "@/bus.js";
import { defineComponent, reactive, toRef, toRefs } from "vue";
export default defineComponent({
  name: "HomeTaskdynamic",
  components: {},
  setup() {
    let State = reactive({
        stateModel:[],
        StateModelBoolean:false,
    })
    bus.$off('stateModel')
    bus.$on('stateModel', (data) => {
    if(data==='empty'){
      State.StateModelBoolean = false
    }else{
      State.StateModelBoolean = true
      State.stateModel = data
    }
       
    })
    function TimeChange(number){
      let integers = parseInt(number / 60)
      let yu = number % 60
      let strings = ''
      if (integers == 0) {
          strings = yu + "秒"
      }else if(integers/60>0 && integers/60<=60){
        strings = integers + "分" + yu + "秒"
      }else if(integers/60>60){
        strings="超过1小时"
      }
      return strings
    }
    return {
      State,
      TimeChange
    };
  },
});
</script>
<style lang="less">
.div-background-Taskdynamic {
  position: absolute;
  left: 980px;
  top: 100px;
  width: 900px;
  height: 300px;
  border-radius: 16px;
  background: #ffffff;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}
.Taskdynamic-moder {
  position: absolute;
  top: 40px;
  width: 900px;
  height: 240px;
}
.Taskdynamic-moder .infinite-list {
  position: absolute;
  height: 100%;
  width: 100%;
}
.Taskdynamic-moder .el-scrollbar__view {
  display: flex;
  flex-wrap: wrap;
}
.Taskdynamic-span-moder {
  width: 100px;
  height: 120px;
  margin-left: 24px;
  margin-top: 15px;
  background: rgba(196, 199, 215, 0.1);
  border-radius: 10px;
}
.Taskdynamic-span-moder span {
  display: block;
  padding-top: 8px;
  text-align: center;
}
.Taskdynamic-span-name {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #1b1b1d;
  line-height: 30px;
}
.Taskdynamic-span-number {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #338cee;
  line-height: 30px;
}
.Taskdynamic-span-time {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #9da0b1;
  line-height: 30px;
}
.img-Taskdynamic {
  position: absolute;
  width: 24px;
  height: 24px;
  left: 19px;
  top: 19px;
}
.user-Taskdynamic-span {
  position: absolute;
  left: 0px;
  top: 18px;
  width: 180px;
  height: 24px;
  font-size: 18px;
  color: #81859c;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859c;
}
.div-background-Taskdynamic .el-scrollbar__wrap {
  overflow-x: hidden;
}
.changefont{
  color: #01A43F;
}
.changefontNo{
  color:rgba(164, 166, 182, 1)
}
.Taskdynamic-moder-No{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: #81859c;
}
</style>
